*{
   /* 页面初始化 清除所有元素的内外边距  */
    margin: 0;

    padding: 0;
}

body {
/* 背景颜色为黑色 */
    background-color: #111;
}

.container {

    position: absolute;

    /* 减号要使用空格！要不然不生效 */
    top: calc(50% - 120px);

    left: calc(50% - 120px);

    width: 200px;

    height: 200px;

    padding: 20px;

    border-radius: 50%;

    background-image: linear-gradient(
        
    150deg,
    
    #5f2093,
        
        transparent,
        
        transparent
    );

    animation: move 6s cubic-bezier(0.45,0.05,0.55,0.95) infinite;

}

.container::before,
.container::after {
    /* 复位为0 */
    content: "";

    top: -185px;

    left: 65px;

    position: relative;

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 5px;

    background-color: rgba(255,255,255,0.8);
}

.container::before {

    width: 35px;

    top: 40px;

    left: 30px;

    transform: rotate(-40deg);
}

.container .planet {

    width: 100%;

    height: 100%;

    border-radius: 50%;
/* linear-gradient是用渐变色来创建图像 */
    background-image: linear-gradient(150deg,
    
    #a37dce,
    
    #5f2093,
        
        transparent);
}


.container .planet::after,.container .planet::before {

    content: "";

    position: absolute;

    top: 90px;

    left: -40px;
    width: 300px;
    height: 40px;
    border: 10px solid #c099ef;
    transform: rotate(-20deg);
    border-top-color: transparent;
    border-radius: 50%;
}

.container .planet::after {

    border-top-color: #c099ef;

    z-index: -99;
}

@keyframes move {
    0% {
        top: 50%;
    }
    50% {
        top: 45%;
    }

    100% {
        top: 50%;
    }
}